import { TableConfigInit } from '@/shared/class'
import { FormType } from '@/shared/enum'
import { h, reactive } from 'vue'
import { ElButton, ElSwitch } from 'element-plus'
import { NoticeClass } from './controller'
import { Delete, Edit } from '@element-plus/icons-vue'
export class ConfigClass {
	noticeClass
	constructor(noticeClass: NoticeClass) {
		this.noticeClass = noticeClass
	}
	public config = new TableConfigInit()
	public tableConfig = {
		...this.config.getDefaultConfig(),
		sortLabel: '序号',
		pagination: {
			currentPage: 1,
			pageSize: 10,
			onPageChange: () => this.noticeClass.onPageChange()
		},
		columns: [
			{
				label: '公告内容',
				key: 'content',
				slotComponent: scope => {
					return h('div', {
						innerHTML: scope.row.content
					})
				}
			},
			{
				label: '是否发布',
				key: 'publish',
				slotComponent: scope => {
					return h(ElSwitch, {
						modelValue: scope.row.publish ?? false,
						inlinePrompt: true,
						activeText: '是',
						inactiveText: '否',
						onChange: val => {
							this.noticeClass.publish({ id: scope.row.id, publish: val })
							scope.row.publish = !scope.row.publish
						}
					})
				}
			},
			{
				label: '创建时间',
				key: 'createdAt'
			},
			{
				label: '操作',
				key: 'operate',
				slotComponent: scope => {
					return h('div', [
						h(ElButton, {
							type: 'danger',
							circle: true,
							icon: Delete,
							onClick: () => {
								this.noticeClass.delete(scope.row.id)
							}
						}),
						h(ElButton, {
							type: 'primary',
							circle: true,
							title: '编辑',
							icon: Edit,
							// disabled: scope.row.disabled,
							onClick: () => {
								this.noticeClass.update(scope.row)
							}
						})
					])
				}
			}
		]
	}

	public searchCol = [
		{
			label: '公告内容',
			key: 'content',
			value: '',
			type: FormType.INPUT
		}
	]

	/**
	 * 编辑用户信息配置
	 */
	public formCol = [
		{
			label: '公告内容',
			key: 'content',
			value: '',
			type: FormType.TEXT,
			span: 24,
			rules: [
				{
					required: true,
					message: '请输入'
				}
			]
		}
	]

	/**
	 * 编辑按钮配置
	 */
	public btns = reactive([
		{
			label: '取消',
			key: 'cancel',
			click: () => {
				this.noticeClass.visible.value = false
			}
		},
		{
			label: '确认',
			key: 'cancel',
			type: 'primary',
			loading: false,
			click: item => {
				this.noticeClass.confirm(item)
			}
		}
	])
}
